<template>
  <div>
    <input type="text" :value="messges | capitalize">
    {{messges | capitalize}}
    <p>{{ inputValue }}</p>
    <input type="text" v-model="msg" @input="inputVal('a')" value="msg">
  </div>
</template>

<script>
  export default {
    name: 'filter1',
    data() {
      return {
        capitalize:'abcd',
        messges:'qwer',
        msg:'abcd'
      }
    },
    filters:{
      capitalize(value){
        if (!value) return ''
       value = value.toString()
       return value.charAt(0).toUpperCase() + value.slice(1)
      }
    },
    computed:{
      inputValue(){
        return this.msg.charAt(0).toUpperCase() + this.msg.slice(1)
      }
    },
    methods:{
      inputVal(a){
        console.log(a)
        let value = this.msg
        if (!value) return ''
        value = value.toString()
        this.msg = value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  }
</script>

